<template>
    <div class="tree-box" :style="'height:'+bodyHeight">
      <div class="v-height-flag">
        <div class="clearfix el-card__header" v-if="pagestatus==1">
          <div style="display: flex;">
            <span style="flex:1;">
              <el-input v-model="filterText"  placeholder="关键字搜索" clearable size="mini" suffix-icon="el-icon-search"/>
            </span>
            <span style="width:70px;margin-left:10px;">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="goAdd">新增</el-button>
            </span>
          </div>
        </div>
        <!-- v-height -->
        <div>
          <el-scrollbar style="height: 100%">
            <div class="tree-box-con">
              <el-tree
                ref="tree"
                :data="parentTree"
                :default-expanded-keys="defaultFrame"
                :default-checked-keys="selectFrame"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :highlight-current="true"
                :props="defaultProps"
                node-key="id"
                @node-click="handleClick"
              >
                <div slot-scope="{ node, data }" class="custom-tree-node">
                  <div class="flex-box" v-if="pagestatus==2">
                    <span class="datalabel">{{ data.item_sn }}</span>
                    <span class="over-text nametext" :title="data.item_depc">{{ data.item_depc }}</span>
                  </div>
                  <div class="flex-box" style="width:100%;" v-else>
                    <span class="over-text" style="display:inline-block;width:50%;">{{ handlerTitleName(data) }} <span v-if="data.children.length > 0">({{ data.children.length }})</span></span>
                    <span style="display:inline-block;width:40%;text-align:right;">{{ handlerTitledaima(data) }}</span>
                    <div>
                      <el-popover
                        :ref="`pop-${data.value}`"
                        :offset="10"
                        placement="bottom-end"
                        trigger="hover"
                        @hide="handleHide"
                        @after-enter="handleShow(data.label)"
                      >
                        <div class="right-item-list">
                          <div class="right-item" @click.stop="addDivsion(0)">
                             添加子级
                          </div>
                          <!-- <div v-if="data.pid !== 0" class="right-item" @click.stop="addDivsion(1)">
                            编辑
                          </div> -->
                          <div v-if="data.pid !== 0" class="right-item" @click.stop="addDivsion(2)">
                            {{ $t('public.delete') }}
                          </div>
                        </div>
                        <div slot="reference" class="iconfont icongengduo right-icon" />
                      </el-popover>
                    </div>
                  </div>
                </div>
              </el-tree>

              <div v-if="disableds" style="position: absolute;z-index:999;top:0;bottom:0;width:100%;background-color:rgba(255,255,255,.1);">
             
              </div>
            </div>
          </el-scrollbar>
          
        </div>
      </div>
      
    </div>
  </template>
  
  <script>
  import { configFrameDeleteApi } from '@/api/setting'
  export default {
    name: 'TreeVue',
    components: {
      
    },
    props: {
      parentTree: {
        type: Array,
        default: () => {
          return []
        }
      },
      treeid: {
        type: Number | String,
        default: () => {
          return 0
        }
      },
      pagestatus: {
         type: Number,
         default: 1
      },
      disableds: {
         type: Boolean,
         default: false
      },
     
    },
    data() {
      return {
        drawerConfig: {},
        filterText: '',
        treeData: [],
        isShowEdit: '',
        multipleSelection: [],
        defaultProps: {
          children: 'children',
          label: 'zhongwenmiaoshu'
        },
        personConfig: {},
        parentId: [],
        tree_id: '',
        topId: '', // 顶级id
        defaultFrame: [],
        selectFrame: [],
        activeValue: '', // 记录当前那个框展开
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }],
        keyName: '',
        clickTimer: null,
        lastClickedNode: null,
        bodyHeight: '100%',
      }
    },
    watch: {
      parentTree: {
        handler(nVal, oVal) {
          this.$nextTick(() => {
            if (!this.isShowEdit && nVal.length) {
                let value = 0;
                // console.log("this.treeid", this.treeid)
                if(this.treeid){
                  value = this.treeid;
                }else{
                  value = nVal[0].id;
                }
                // console.log("value", value)
                this.selectFrame = [value]
                if(nVal.length == 1){
                   this.defaultFrame = [value]
                }
              this.$refs.tree.setCurrentKey(this.treeid ? this.treeid : value)
            }
            this.topId = nVal.length ? nVal[0].id : ''
          })
        },
        deep: true
      },
      // 节点过滤
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    mounted() {
      this.keyName = this.handlerUrlName();
      this.bodyHeight = document.body.clientHeight - 80 + 'px';
    },
    methods: {
      // 双击事件
      handleNodeDoubleClick(data, node){
        let schildlength = data.children.length || 0;
        let objs = { level: node.level, status: schildlength }
        this.defaultFrame = [data.id]
        this.$emit("DbhandlerTree", data, objs)
      },
      // 展开事件和选中事件
      dbhandlerexpand(id){

        this.defaultFrame = [id]
        this.selectFrame = [id]
        this.$refs.tree.setCheckedKeys([id]);
      },
      // 获取url路径名称-实体表名
      handlerUrlName(){
        const routeString = this.$route.path
        const routeArray = routeString.split('/').filter((item) => item !== '')
        return routeArray[3]
      },
      // 编辑窗口显示
      handleShow(value) {
        this.activeValue = value
      },
      // 编辑窗口隐藏
      handleHide() {
        this.activeValue = ''
      },
      // tree节点点击 
      handleClick(data, node, event) {
        if (this.clickTimer) { // 如果已经有计时器，说明是双击
          // 如果已经有计时器，说明是双击
          clearTimeout(this.clickTimer);
          this.clickTimer = null;
          this.handleNodeDoubleClick(data, node);
        } else {
          // 第一次点击，设置计时器
          this.lastClickedNode = node;
          this.clickTimer = setTimeout(() => {
            this.clickTimer = null;
            // 这里可以处理单击事件
            this.tree_id = node.id
            if(this.pagestatus==1){ // 物料清单
              let childData = this.parentTree[0].children;
              let indexs = 0;
              for(let i=0;i < childData.length;i++){
                if(node.id == childData[i].id){
                  indexs = i;
                  break;
                }
              }
              this.$emit('handlerTree', data, 6, indexs)
            }else{
              let schildlength = data.children.length || 0;
              let objs = { level: node.level, status: schildlength }
              this.defaultFrame = [data.id]
              this.$emit('handlerTree', data, 6, objs)
            }
          }, 250); // 250ms内再次点击视为双击
        }
      },
      goAdd(){
        this.selectFrame = []
        this.defaultFrame= []
        this.$refs.tree.setCheckedKeys([]);
        this.$emit('handlerTree', '')
      },
      // 显示tree编辑
      showTreeEdit(node, data) {
        this.isShowEdit = data.value
      },
      // tree搜索过滤
      filterNode(value, data) {
        if (!value) return true
        return data.zhongwenmiaoshu.indexOf(value) !== -1
      },
      
      // 添加子部门
      addDivsion(type) {
        const node = this.$refs.tree.getCurrentNode()
        if(type==0){ // 添加
          this.tree_id = node.id
          this.$emit('handlerTree',node, 11)
        }else if(type==2){ // 删除
          this.tree_id = node.id
          this.$emit('handlerTree',node, 3)
        }
        
      },
      handlerTitleName(data){
         if(this.keyName == 'gongxushezhong'){ // 工序设置
            return data.zhongwenmiaoshu;
         }else if(this.keyName=='wuliaoleibieshuxing') {
            return data.zhongwenmiaoshu;

         }
      },
      handlerTitledaima(data){
         if(this.keyName == 'gongxushezhong'){ // 工序设置
            return data.gongxudaima;
         }else if(this.keyName=='wuliaoleibieshuxing') {
            return data.leibiedaima;

         }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tree-icon {
    margin-right: 5px;
    font-size: 15px;
    color: #ffca28;
  }
  // .el-card__header /deep/.el-input--small .el-input__inner {
  //   cursor: pointer;
  // }

  .datalabel{
    margin-right:20px;display:inline-block;width:40%;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  }
  .nametext{
    display:inline-block;width:50%;text-align:right;
  }
  
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: rgba(240, 250, 254, 0.6);
    border-color: #1890ff;
    .flex-box {
      color: #1890ff;
      font-weight: 600;
    }
  }
  /deep/.tree-box-con .el-tree-node__content {
    width: 100%;
    height: 40px;
    padding-right: 15px;
    border-right: 2px solid transparent;
  }
  /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .custom-tree-node,
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .right-icon {
    display: inline-block;
    color: #1890ff;
    font-weight: 600;
  }
  
  /deep/.el-tree-node > .el-tree-node__children {
    overflow: inherit;
  }
  
  .custom-tree-node {
    position: relative;
    width: calc(100% - 20px);
    .flex-box {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303133;
  
      span:first-of-type {
        display: inline-block;
        max-width: 66%;
      }
      .right-icon {
        display: none;
        position: absolute;
        right: -6px;
        top: 0px;
      }
    }
  
    .edit-box {
      z-index: 200;
      position: absolute;
      right: 0;
      bottom: -124px;
      width: 120px;
      padding: 7px 0;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      color: #000000;
      background: #fff;
      .edit-item {
        height: 40px;
        line-height: 40px;
        padding-left: 19px;
        font-size: 13px;
        &:active {
          background: #f5f5f5;
        }
      }
    }
  }
  
  .tree-box-con {
    padding-bottom: 12px;
    position: relative;
  }
  
  .tree-box {
    background: #fff;
    margin: -20px 0 -20px -20px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  </style>
  